<template>
    <div>
        <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-icon name="wap-nav" size="18" @click="onClickRight" />
            </template>
        </van-nav-bar>

        <van-popup v-model="show" round position="center" class="custom-popup" duration>
            <!-- 弹框内容 -->
            <van-cell class="custom-cell" :border="true" is-link to="/spa/mobile/mainte/home" value="首页" />
            <van-cell class="custom-cell" :border="true" is-link to="/spa/mobile/mainte/headView" value="Head保养查看" />
            <van-cell class="custom-cell" :border="true" is-link to="/spa/mobile/mainte/addHeadMaintain" value="Head保养登记" />
            <van-cell class="custom-cell" :border="true" is-link to="/spa/mobile/mainte/module" value="模组保养登记" />
            <!-- <van-cell class="custom-cell" :border="true" is-link to="/spa/mobile/mainte/feeder" value="Feeder保养登记" /> -->
            <van-cell class="custom-cell" :border="true" is-link to="/spa/mobile/mainte/nozzle" value="Nozzle保养登记" />
        </van-popup>

    </div>
</template>

<script>
export default {
    name: 'NavPopup',
    props: {
        title: {
            type: String,
            default: '保养维护',
        },
    },
    data() {
        return {
            show: false,

        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onClickRight() {
            this.show = true;

        },
    },
};
</script>

<style scoped>
.custom-popup {
    height: 40%;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.custom-cell {
    flex: 1;
    text-align: center;
}
</style>
